<template>
  <div>

    <!-- 表单 -->
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="80px"
      style="width: 300px"
    >
    <img src="" class="imgs_2">
    <el-form-item label="头像" prop="src">
        <el-input v-model="form.src" placeholder="请输入头像地址" id="input_img" @blur="img_s()"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="form.sex" placeholder="请输入性别" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="地区" prop="city">
        <el-input v-model="form.city" placeholder="请输入地区(城市)" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="电子邮件" prop="email">
        <el-input v-model="form.email" placeholder="请输入电子邮件" />
      </el-form-item>
      <el-form-item label="职位" prop="post">
        <el-input v-model="form.post" placeholder="请输入职位" />
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="submit">立即新增</el-button>
        <el-button type="info" plain @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
        dialogVisible: false,
      form: {
        name: "", //
        sex: "", //
        age: "", //
        city: "", //
        phone: "", //
        email: "", //
        src:"",
        post:""
      },
      rules: {
        name: [{ required: true, message: "姓名必须填写", trigger: "blur" }], //
        sex: [{ required: true, message: "性别必须填写", trigger: "blur" }], //
        age: [{ required: true, message: "年龄必须填写", trigger: "blur" }], //
        city: [{ required: true, message: "地区必须填写", trigger: "blur" }], //
        phone: [{ required: true, message: "手机号必须填写", trigger: "blur" }], //
        email: [{ required: true, message: "电子邮箱必须填写", trigger: "blur" }], //
      },
    };
  },
  methods: {
   img_s(){
    let aa = document.querySelector('#input_img').value
    console.log(aa);
    document.querySelector('.imgs_2').src = `${aa}`
   }
    ,
    // 提交添加演员表单
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // valid返回true  意味着两个字段都验证通过
          // 发送post请求,执行添加业务
          console.log("验证通过");
          this.$http.employeesApi.add(this.form).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$refs["form"].resetFields();
              this.$message({
                message: "新增用户完成",
                type: "success",
              });
            }
          });
        }
      });
    },
    resetForm(form) {
      this.$refs["form"].resetFields();
    },
  },
};
</script>

<style lang="scss">
.imgs_2{
  width: 100px;
  height: 100px;
  margin-left: 80px;
  // display: none;
}
</style>
